<template>
    <view>
        <view class="item" v-for="i in newsData" @click="navigatorTo(i.article_url)">
            <span class="flex-item item1">
            <image  v-if='i.thumbnail_url.match("847723")' src="../../static/cover.jpg" class="img" />
            <image  v-else :src="i.thumbnail_url" class="img" />
                </span>
            <span class="flex-item item2">{{i.title}}<text class="u-newsTime">{{i.published_at}}</text></span>
        </view>
        // <image src="../../static/goback.png" class="u-fixed" @click="navigatorTo()" />
    </view>
</template>
<script lang="ts">
    import Vue from "vue";
    export default Vue.extend({
        data() {
            return {
                newsData: []
            };
        },
        onShow() {
            console.log("App Show");
          },
        onLoad() { },
        mounted() {
            let that = this;
            uni.request({
              url: 'https://www.nbd.com.cn/columns/1279/articles_list.json',
              method: 'GET',
              success: function (res) {
                console.log(res.data)
                that.newsData = res.data
              }
      
            })
        },
        methods: {
            navigatorTo(url) {
                console.log(url)
                uni.navigateTo({
                    url: '/pages/index/webView?url=' + url,
                  })
            }


          
        },

    });
</script>
<style lang="scss">
    .u-newsTime {
        display: block;
        margin-top: 10upx;
        font-size: 22upx;
        color: #a5a7ad;
    }

    .u-fixed {
        width: 110upx;
        height: 110upx;
        position: fixed;
        right: 30upx;
        bottom: 300upx;
    }

    .img {
        max-width: 100%;
        width: 165upx;
        height: 124upx;
        border-radius: 15upx;
    }

    .item1 .u-downicon {
        width: 30upx;
        height: 38upx;
        margin-top: 20upx;
        display: inline-block;
    }

    .item1 abbr {
        font-size: 20upx;
        display: inline-block;
        margin-left: 20upx;
        position: relative;
        top: -15upx
    }

    .item {
        color: #fff;
        width: 100%;
        min-height: 114upx;
        line-height: 40upx;
        box-sizing: border-box;
        background: url("../../static/projectBg2.jpg");
        background-size: 100% 100%;
        border-radius: 15upx;
        display: -webkit-flex;
        display: flex;
        font-size: 30upx;
        padding: 30upx 20upx;
        margin: 20upx 0;

        .u-guest {
            height: 30upx;
            width: 25upx;
            margin-right: 20upx;
            vertical-align: middle;
        }

        .item1 {
            -webkit-flex: 1;
            flex: 1;
            padding-left: 30upx;
        }

        .item2 {
            -webkit-flex: 3;
            flex: 3;
            padding-left: 30upx;
        }
    }
</style>